<!DOCTYPE html>
<html>
    <head>
        <title>Geolocation</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            html, body, #map-canvas {
                margin: 0;
                padding: 0;
                height: 100%;
            }
        </style>
        <!--
        Include the maps javascript with sensor=true because this code is using a
        sensor (a GPS locator) to determine the user's location.
        See: https://developers.google.com/apis/maps/documentation/javascript/basics#SpecifyingSensor
        -->
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

        <script>
            var map;
            var latitud;
            var longitud;

            function initialize() {
                var mapOptions = {
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);
              //verificacion si el browser acepta geolocalizacion
                if(navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
                      // extraccion de las coordenadas 
                      var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                      //marcador en la posicion "pos" la cual es las coordenadas de la geolocalizacion
                        var marker=new google.maps.Marker({
                            position:pos
                        });
                        marker.setMap(map);
                      // mensaje del marcador
                        var infowindow = new google.maps.InfoWindow({
                            map: map,
                            position: pos,
                            content: 'AQUI ESTAS!'
                        });
                        
                      //union marcador mensaje
                    infowindow.open(map,marker);
                        map.setCenter(pos);
                        
                    }, function() {
                        handleNoGeolocation(true);
                    });
                } else {
                    // Browser sin soporte de geolocalizacion
                    handleNoGeolocation(false);
                }
            }

            function handleNoGeolocation(errorFlag) {
                if (errorFlag) {
                    var content = 'Error: The Geolocation service failed.';
                } else {
                    var content = 'Error: Your browser doesn\'t support geolocation.';
                }

                var options = {
                    map: map,
                    position: new google.maps.LatLng(60, 105),
                    content: content
                };

                var infowindow = new google.maps.InfoWindow(options);
                map.setCenter(options.position);
        
            }
            google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>